<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
            <p>{{ scope.row.name }}</p>
        </template>
      </el-table-column>
       <el-table-column label="住址" width="180">
        <template slot-scope="scope">
            <p>{{ scope.row.address }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button size="mini" type="primary" v-hasMenu="'creat'">新增</el-button>
          <el-button size="mini" type="success" v-hasMenu="'edit'">修改</el-button>
          <el-button size="mini" type="danger" v-hasMenu="'del'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
      

<script>
import hasMenu from "@/utils/hasMenu";
export default {
  data() {
    return {
      tableData: [
        {
          name: "王小虎1",
          address: "上海市",
        },
        {
          name: "王小虎2",
          address: "北京市",
        }
      ],
    };
  },
  created() {
    //模拟登录后端返回的按钮权限列表
     let arr = ["creat","edit"];
     localStorage.setItem('permission',JSON.stringify(arr))
  },
  mounted() {
    
  },
  methods: {},
  computed: {},
  watch: {},
  directives:{
			'hasMenu':{
			    bind(el,binding){  
            let arr=JSON.parse(localStorage.getItem('permission'))
            let bl=arr.includes(binding.value) 
            if(!bl){
                el.style.display='none'
                setTimeout(()=>{
                  el.parentNode.removeChild(el)
                },0)
            }
          },
			}
		}
};
</script>

<style scoped lang='scss' >

</style>
